<script>
export default {
  name: 'Sidebar',
  data() {
    return {
      menus: [
        {
          id: '1',
          title: 'Element-ui',
          children: [
            {
              id: '1-1',
              title: '虚拟表格',
              path: '/virtual-table',
            },
          ],
        },
        {
          id: '2',
          title: 'vant-ui',
          children: [
            {
              id: '2-1',
              title: '标签页',
              path: '/vant-tabs',
            },
          ],
        },
      ],
      defaultActive: '',
    }
  },
  watch: {
    $route: {
      handler(val) {
        this.defaultActive = val.path
      },
      immediate: true,
    },
  },
  methods: {
    selectMenu(index) {
      const routePath = this.$route.path
      if (index !== routePath) {
        this.$router.push(index)
      }
      this.$emit('selectMenu')
    },
  },
}
</script>

<template>
  <aside class="sidebar">
    <el-menu :default-active="defaultActive" @select="selectMenu">
      <MenuItem v-for="item in menus" :key="item.id" :menu="item" />
    </el-menu>
  </aside>
</template>

<style scoped>
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  padding-bottom: 20px;
  border-right: 1px solid #dcdfe6;
  overflow-x: hidden;
  overflow-y: auto;

  .el-menu {
    border: none;
    margin-top: 20px;

    ::v-deep .el-menu-item {
      height: 40px;
      line-height: 40px;
    }

    ::v-deep .el-submenu .el-submenu__title {
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
